<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
		
		<div id="app2">
			<span v-bind:title="message">
				v-bind attribute 
			</span>
		</div>
		
		<div id="app3">
			<span v-if="message">显示说明msg为true</span>
		</div>
		
		<div id="app4">
			<ol>
				<li v-for="text in texts">
					{{ text.message }}
				</li>
			</ol>
		</div>
		
		<div id='app5'>
			<span>{{ message }}</span>
			<br>
			<button v-on:click="reverseMsg">点我反向显示上列文字</button>
		</div>
		
		<div id='app6'>
			<span>{{ message }}</span>
			<input v-model="message" />
		</div>
	</body>
	
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'hello vue'
			}
		})
		
		var app2 = new Vue({
			el: '#app2',
			data: {
				message: 'v-bind test'
			}
		})
		
		var app3 = new Vue({
			el: '#app3',
			data: {
				message: true
			}
		})
		
		var app4 = new Vue({
			el: '#app4',
			data: {
				texts: [
					{'message': 'iphone'},
					{'message': 'oppo'}
				]
			}
		})
		
		var app5 = new Vue({
			el: '#app5',
			data: {
				message: 'abcdefg'
			},
			methods:{
				reverseMsg: function(){
					this.message = this.message.split('').reverse().join('')
				}
			}
		})
		
		var app6 = new Vue({
			el: '#app6',
			data: {
				message: '双向绑定'
			}
		})
	</script>
</html>
